<template>
  <div class="date-range-picker">
    <a-form-item-rest>
      <a-date-picker v-model:value="startDate" placeholder="开始日期" :disabledDate="disabledStartDate" />
      <span class="separator">至</span>
      <a-date-picker
        v-model:value="endDate"
        :placeholder="isLongTerm ? '不限' : '结束日期'"
        :disabledDate="disabledEndDate"
        :disabled="isLongTerm"
      />
      <a-checkbox class="separator" v-if="showLongTerm" v-model:checked="isLongTerm">长期投放</a-checkbox>
    </a-form-item-rest>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import type { Dayjs } from "dayjs";
import dayjs from "dayjs";

const props = withDefaults(
  defineProps<{
    startDate?: string;
    endDate?: string;
    showLongTerm?: boolean;
  }>(),
  {
    startDate: "",
    endDate: "",
    showLongTerm: true,
  }
);

const emit = defineEmits<{
  (e: "update:startDate", value: string): void;
  (e: "update:endDate", value: string): void;
}>();

// 将字符串日期转换为 Dayjs 对象
const startDate = ref<Dayjs | null>(props.startDate ? dayjs(props.startDate) : null);
const endDate = ref<Dayjs | null>(props.endDate ? dayjs(props.endDate) : null);
const isLongTerm = ref(false);

// 限制开始日期：不能选择今天之前的日期，且不能选择结束日期之后的日期
const disabledStartDate = (current: Dayjs) => {
  const today = current.isBefore(new Date(), "day");
  if (!endDate.value) return today;
  return today || current.isAfter(endDate.value, "day");
};

// 限制结束日期：不能选择开始日期之前的日期
const disabledEndDate = (current: Dayjs) => {
  if (!startDate.value) return false;
  return current.isBefore(startDate.value, "day");
};

// 监听开始日期变化
watch(startDate, (newValue) => {
  emit("update:startDate", newValue ? newValue.format("YYYY-MM-DD") : "");
});

// 监听结束日期和长期投放变化
watch([endDate, isLongTerm], () => {
  const formattedEndDate = isLongTerm.value ? "9999-12-31" : endDate.value ? endDate.value.format("YYYY-MM-DD") : "";
  emit("update:endDate", formattedEndDate);
});

// 监听 showLongTerm 变化
watch(
  () => props.showLongTerm,
  (newValue) => {
    if (!newValue && isLongTerm.value) {
      // 如果隐藏长期投放选项，且当前是长期投放状态，则重置状态
      isLongTerm.value = false;
      endDate.value = null;
    }
  },
  { immediate: true }
);

// 监听props变化
watch(
  () => props.startDate,
  (newValue) => {
    startDate.value = newValue ? dayjs(newValue) : null;
  }
);

watch(
  () => props.endDate,
  (newValue) => {
    if (newValue === "9999-12-31" && props.showLongTerm) {
      // 只有在允许长期投放时才设置长期投放状态
      isLongTerm.value = true;
      endDate.value = null;
    } else {
      isLongTerm.value = false;
      endDate.value = newValue ? dayjs(newValue) : null;
    }
  }
);

// 监听长期投放的变化
watch(isLongTerm, (newValue) => {
  if (newValue) {
    endDate.value = null; // 当选择长期投放时，清空结束日期
  }
});

// 确保组件挂载后重新赋值一次来触发监听
onMounted(() => {
  const temp = endDate.value;
  endDate.value = null;
  setTimeout(() => {
    endDate.value = temp;
  }, 0);
});
</script>

<style scoped>
.date-range-picker {
  display: flex;
  align-items: center;
}

.separator {
  margin: 0 8px;
}
</style>
